import Vue from 'vue'; // 导入vue
import Preview from './preview.vue'; // 导入组件

// 将组件作为参数，使用vue提供的全局方法，创建一个构造函数
let PreviewConstructor = Vue.extend(Preview);

let instance;

const Drawer = function ({ urlList, show = true, maskBg = '#000' }) {
	return new Promise((resolve, reject) => {
		// 初始化实例，此时instance是一个组件实例，但未初始化未完成
		instance = new PreviewConstructor({
			data: {
				urlList,
				show,
				maskBg,
			},
			methods: {
				closePreview: () => {
					unmount();
					resolve();
				},
			},
		});
		// 卸载组件
		const unmount = () => {
			instance.show = false;
		};
		// 完成初始化
		instance.$mount();

		// 将组件添加到根节点body
		document.body.appendChild(instance.$el);
		instance.show = true;
	});
};

export default Drawer;
